<template>
  <div class="shopcart">
    <ul>
		<li v-for="item in shopcart" :key="item.id">
			<img :src="item.scr" alt="">
			<div>
				<p>{{ item.title }}x{{ item.num }}</p>
				<p class="price">￥ {{ item.price }}</p>
				<button @click="del(item)">删除</button>
			</div>
		</li>
	</ul>
	<p v-if="shopcart.length" class="total-price">商品总价：￥ {{totalprice}}</p>
	<p v-else class="no-price">购物车暂无商品</p>
  </div>
</template>



<script>
	
	
	export default {
	  name:'shopcart',
	  computed:{			//shoplist的数据是放在store里面进行集中管理，可以在组件里面直接通过computed直接获取
	  	  shopcart(){
	  		  return this.$store.state.shopcart;
	  	  },
		  totalprice(){
			  return this.$store.getters.totalprice;
		  }
	  },
	  
	  methods:{
	  	  del(item){
	  		  //通过提交一个mutation来改变购物车的属性
	  		  this.$store.commit('del',item);
	  	  }
	  }
	  
	  }
</script>

<style scoped>
	.shopcart{
		padding-bottom: 50px;
	}
	img{
		width: 100px;
		border: 1px solid #ccc;
		margin: 10px 10px 5px 10px;
	}
	li{
		border-bottom: 1px dashed #ccc;
		position: relative;
	}
	li div{
		display: inline-block;
		position: absolute;
		top: 20px;
		line-height: 30px;
		
	}
	.price{
		color: #f00;
	}
	button{
		background-color: coral;
		border: none;
		color: white;
		padding: 5px;
		border-radius: 5px;
	}
	.total-price{
		margin: 10px;
	}
	.no-price{
		text-align: center;
		margin-top: 100px;
	}

</style>